
<template>
  <div style="display: flex; flex-wrap: wrap;">
   
     <!-- <el-col :span="2" style="font-size: 10px;width: 10px;display: flex; flex-direction: column;word-break: break-all; 
     justify-content: center;align-content: center;justify-items: center;align-items: center;
     margin-left: 8px;
     ">
       {{washCode.substring(0,6)}}
    </el-col> -->
    <el-col :span="8">
        <img
        ref="barcode"
        style="
      width: 200px;
      height: 50;
      /* transform: rotate(90deg) translate(45px, -60px); */
      position: absolute;
      top: 0;
      right: 10px;
      z-index: 1;
    "
    class="barcode"
  />
    </el-col>
  </div>
 
</template>

<script>
import JsBarcode from "jsbarcode";

export default {
  props: ["washCode"],
  mounted() {
    this.generateBarcode();
  },
  watch: {
    washCode() {
      this.generateBarcode();
    },
  },
  methods: {
    generateBarcode() {
      const el = this.$refs.barcode;
      if (!this.washCode) {
        console.warn("Invalid washCode value");
        return;
      }
      if (el) {
        JsBarcode(el, "W20241003c00100011", {
          format: "CODE128",
          width: 2,
          height: 40,
          displayValue: false,
          margin: 5,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped></style>

